import React, { Component } from 'react'
import store from '../store'
import {CHANGEAGE, CHANGENAME} from '../store/type'

export default class Redux extends Component {
  constructor() {
    super();
    this.state = {
      name: '',
      age: 1
    }
  }
  componentDidMount() {
    console.log(this.state);
    // store.getState()  获取这个对象
    this.setState(store.getState());
    // 订阅数据的变化，每次数据更新都会执行
    this.unsubscribe = store.subscribe(() => {
      // 每当数据变化时，这个函数就会执行
      this.setState(store.getState());
    })
  }
  // action creator 创建action,负责产生所有的action,统一处理
  actionCreator = {
    // changeName是一个函数，是actionCreator的一个方法.
    // 调用这个方法，就会返回一个对象，这个对象就是action
    changeName: (name) => ({ type: CHANGENAME, name: name }),
    changeAge: (age) => ({ type: CHANGEAGE, age: age }),
  }
  // 在组件销毁前取消订阅
  componentWillUnmount() {
    // 再次调用函数，取消订阅
    this.unsubscribe()
  }
  changeName() {
    // 通过dispatch方法触发数据的变化，参数是一个对象，就是action
    // store.dispatch({type: 'changeName', name: 'Jane'}); // 原始方法
    store.dispatch(this.actionCreator.changeName('Sam'));
  }
  changeAge() {
    // 通过dispatch方法触发数据的变化，参数是一个对象，就是action
    store.dispatch({ type: CHANGEAGE, age: '20' });
  }
  render() {
    return (
      <div>
        <p>Redux复习</p>
        {/* vuex的写法：$store.state.name */}
        <p>{this.state.name}</p>
        <p>{this.state.age}</p>
        <button onClick={() => this.changeName()}>修改名字</button>
        <button onClick={() => this.changeAge()}>修改年龄</button>
      </div>
    )
  }
}

